<%@page contentType="text/html;charset=utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@page import="java.util.List"%>

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>可视化管理</title>
		<%@ include file="../jslib/jquerylib.jsp"%>
		<script type="text/javascript" src="<%=request.getContextPath() %>/jslib/lhgdialog/lhgcore.lhgdialog.min.js?skin=mac"></script>
		<script type="text/javascript" src="<%=request.getContextPath() %>/js_css_image/lhgdialog/lhgcore.lhgdialog.min.js?skin=mac"></script>
		<script type="text/javascript" src="resources/js/mypage.js"></script>
		<script type="text/javascript" src="js/commontdm.js"></script>
		<link rel="stylesheet" href="<%=request.getContextPath() %>/jslib/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css"/>
        <script type="text/javascript" src="<%=request.getContextPath() %>/jslib/ztree/jquery.ztree.core-3.4.js"></script>
		<style>
		
		<c:if test="${requestScope.message!=null}">
			<script type="text/javascript">
  	 		     alert('<c:out value="${requestScope.message}"></c:out>');
  	 		     window.close();
  			</script>
        </c:if>
        
		html,body {
			margin: 0;
			padding: 0;
			font-family: "Microsoft YaHei";
			font-size: 12.5px;;
		}
		
		.button_b{cursor:hand;}
		
		.title{width:100%;height:20px;background-image:url(<%=request.getContextPath() %>/visual/images/title.gif); background-repeat:repeat-x;padding-top:0px;color:#000;font-size:12px;} 
		.titlie{background-image: url(<%=request.getContextPath() %>/visual/images/titlie.gif); height: 20px; width: 265px; padding-top:5px;}
		</style>
		<script type="text/javascript" >
		var tree_sel=null;
		
		$(document).ready(function(){ 
						$("#gridTable").jqGrid({
							url:common_contextPath+'/visual/visualAction!GetVisualList.action',
							datatype: "json",
							height: "500",
							autowidth: true, 
							colNames:['id','名称','文件地址','备注','父id'],
							colModel:[
								{name:'id',index:'0', width:60, sorttype:"int",hidden:true,hidedlg:true},  
								{name:'visualname',align:'center',index:'1',width:'180' },
								{name:'picaddress',align:'center',index:'2',width:'180' },
								{name:'remark',align:'center',index:'3',width:'260' },
								{name:'parentid',align:'center',index:'3',hidden:true }
							],   
							shrinkToFit:false,
							sortname:'id',
							sortorder:'desc',
							viewrecords:true,
							multiselect:true, // 是否显示复选框
							multiboxonly :true, 
							gridview:true,  //提升速度
							rownumbers:true,//显示行号
							rownumWidth:20, //行号的宽度
							//rowNum:pageNum,
							rowList:[10,20,30],
							jsonReader: {
								root:"rows",		// 数据行（默认为：rows）
								page: "page",  	// 当前页
								total: "total",  // 总页数
								records: "records",  // 总记录数
								repeatitems : false		// 设置成false，在后台设置值的时候，可以乱序。且并非每个值都得设
							},
							prmNames:{rows:"rows",page:"page",sort:"sidx",order:"sord",search:"search"},
							pager:"#gridPager",
							caption: "可视化列表"
					});
					jQuery("#gridTable").jqGrid('navGrid','#gridPager',{add:false,edit:false,del:false,search:false,refresh:false});
					jQuery("#gridTable").jqGrid('navButtonAdd','#gridPager',
							{ 	
							caption: "列状态",                          
							title: "Reorder Columns",                           
							onClickButton : function (){                               
							jQuery("#gridTable").jqGrid('setColumns');                           
							}
					}); 
					
		});  

		var zNodes = ${floorinfotree};

		var setting = {
				treeId:'tree',
				callback: {
						onClick: zTreeOnClick,
						beforeCollapse: beforeCollapse,
						beforeExpand: beforeExpand,
						onCollapse: onCollapse,
						onExpand: onExpand
					},
				view: {
					selectedMulti: false
				},
				data: {
					key: {
						title: "name"
					},
					simpleData: {
						enable: true,
						idKey: "id",
						pIdKey: "pId",
						rootPId: 1
					}
								
				},
				view: {
					fontCss: getFontCss
				}
			};
		function zTreeOnClick(event, treeId, treeNode) {
				tree_sel = treeNode;
			    var id=treeNode.id;
			    var name = treeNode.name;
			    var type = treeNode.type;
			    var pId = treeNode.pId;
			    jQuery("#gridTable").jqGrid('setGridParam',
					{
						url:common_contextPath+'/visual/visualAction!GetVisualList.action?type='+type+'&visualId='+id+'&pId='+pId					
						}).trigger("reloadGrid", [{page:1}]);
			};	
		//--查询名称 高亮 开始---------------------------------------------------------------------
			function focusKey(e) {
				if (key.hasClass("empty")) {
					key.removeClass("empty");
				}
			}
			function blurKey(e) {
				if (key.get(0).value === "") {
					key.addClass("empty");
				}
			}
			var lastValue = "", nodeList = [], fontCss = {};
			
			function searchNode(e) {
				var zTree = $.fn.zTree.getZTreeObj("tree");
				var value = $.trim(key.get(0).value);
				var keyType = "";
				keyType = "name";
				if (lastValue === value) return;
				lastValue = value;
				if (value === "") return;
				updateNodes(false);
				nodeList = zTree.getNodesByParamFuzzy(keyType, value);
				updateNodes(true);
	
			}
			function updateNodes(highlight) {
				var zTree = $.fn.zTree.getZTreeObj("tree");
				for( var i=0, l=nodeList.length; i<l; i++) {
					nodeList[i].highlight = highlight;
					zTree.updateNode(nodeList[i]);
				}
			}
			function getFontCss(treeId, treeNode) {
				return (!!treeNode.highlight) ? {color:"#A60000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
			}
			function filter(node) {
				return !node.isParent && node.isFirstNode;
			}
			//展开/关闭按钮 开始-----------------------------------------------------------------------
			var log, className = "dark";
			function beforeCollapse(treeId, treeNode) {
				className = (className === "dark" ? "":"dark");
				showLog("[ "+getTime()+" beforeCollapse ]&nbsp;&nbsp;&nbsp;&nbsp;" + treeNode.name );
				return (treeNode.collapse !== false);
			}
			function onCollapse(event, treeId, treeNode) {
				showLog("[ "+getTime()+" onCollapse ]&nbsp;&nbsp;&nbsp;&nbsp;" + treeNode.name);
			}		
			function beforeExpand(treeId, treeNode) {
				className = (className === "dark" ? "":"dark");
				showLog("[ "+getTime()+" beforeExpand ]&nbsp;&nbsp;&nbsp;&nbsp;" + treeNode.name );
				return (treeNode.expand !== false);
			}
			function onExpand(event, treeId, treeNode) {
				showLog("[ "+getTime()+" onExpand ]&nbsp;&nbsp;&nbsp;&nbsp;" + treeNode.name);
			}
			function showLog(str) {
				if (!log) log = $("#log");
				log.append("<li class='"+className+"'>"+str+"</li>");
				if(log.children("li").length > 8) {
					log.get(0).removeChild(log.children("li")[0]);
				}
			}
			function getTime() {
				var now= new Date(),
				h=now.getHours(),
				m=now.getMinutes(),
				s=now.getSeconds(),
				ms=now.getMilliseconds();
				return (h+":"+m+":"+s+ " " +ms);
			}
			function expandNode(e) {
				var zTree = $.fn.zTree.getZTreeObj("tree"),
				type = e.data.type,
				nodes = zTree.getSelectedNodes();
				if (type.indexOf("All")<0 && nodes.length == 0) {
					alert("请先选择一个父节点");
				}
	
				if (type == "expandAll") {
					zTree.expandAll(true);
				} else if (type == "collapseAll") {
					zTree.expandAll(false);
				} else {
					var callbackFlag = $("#callbackTrigger").attr("checked");
					for (var i=0, l=nodes.length; i<l; i++) {
						zTree.setting.view.fontCss = {};
						if (type == "expand") {
							zTree.expandNode(nodes[i], true, null, null, callbackFlag);
						} else if (type == "collapse") {
							zTree.expandNode(nodes[i], false, null, null, callbackFlag);
						} else if (type == "toggle") {
							zTree.expandNode(nodes[i], null, null, null, callbackFlag);
						} else if (type == "expandSon") {
							zTree.expandNode(nodes[i], true, true, null, callbackFlag);
						} else if (type == "collapseSon") {
							zTree.expandNode(nodes[i], false, true, null, callbackFlag);
						}
					}
				}
			}
			
			var key;
			$(document).ready(function(){
				treeObj = $.fn.zTree.init($("#tree"), setting, zNodes);
				$("#expandAllBtn").bind("click", {type:"expandAll"}, expandNode);
				$("#collapseAllBtn").bind("click", {type:"collapseAll"}, expandNode);
				
				key = $("#key");
				key.bind("focus", focusKey)
				.bind("blur", blurKey)
				.bind("propertychange", searchNode)
				.bind("input", searchNode); 
			}); 

			
			
		function addvisual(){
			if(tree_sel==null){
						alert("请选择相应节点进行新建");
			}else{
				var type = tree_sel.type;
				var pid = tree_sel.id;
				
					if(type==2){
						alert("不能在该节点上添加！");
					}else{
						$.dialog({
					        id:'add',
					        title:'添加基本信息', 
					        content:'url:<%=request.getContextPath()%>/visual/visualadd.jsp?type='+type+'&pid='+pid+'&temp='+new Date(),
					        okVal:false,//确定按钮文字
					        cancelVal:false,//取消按钮文字
					        min:true, //是否显示最小化按钮
					        max:false,//是否显示最大化按钮
					        fixed:false,//开启静止定位
					        lock:true,//开启锁屏
					        focus:true,//弹出窗口后是否自动获取焦点（4.2.0新增）
					        time:null,//设置对话框显示时间
					        resize:true,//是否允许用户调节尺寸
					        drag:true,//是否允许用户拖动位置
					        cache:false,//是否缓存iframe方式加载的窗口内容页
					        width: '600px',
					        height: 380
			        	});
					}
	        	}
	        }
	        
	        function editvisual(){
		        var ids= $("#gridTable").jqGrid("getGridParam", "selarrrow") + "";
				if (!ids) {
				    alert("请先选择记录!");  
				    return false;  
				}
				if(ids.indexOf(",")!=-1){
					  alert("只能选择一条记录!");  
				        return false; 
				}
			    var row = jQuery("#gridTable").jqGrid('getRowData',ids);//获取选中行.
			    var id = row.id;//获取选中行的id属性
	        	$.dialog({
			        id:'update',
			        title:'修改基本信息', 
			        content:'url:<%=request.getContextPath()%>/visual/visualAction!queryVisualById.action?id='+id+'&temp='+new Date(),
			        okVal:false,//确定按钮文字
			        cancelVal:false,//取消按钮文字
			        min:true, //是否显示最小化按钮
			        max:false,//是否显示最大化按钮
			        fixed:false,//开启静止定位
			        lock:true,//开启锁屏
			        focus:true,//弹出窗口后是否自动获取焦点（4.2.0新增）
			        time:null,//设置对话框显示时间
			        resize:true,//是否允许用户调节尺寸
			        drag:true,//是否允许用户拖动位置
			        cache:false,//是否缓存iframe方式加载的窗口内容页
			        width: '600px',
			        height: 380
	        	});
	        }
	        
	        function delvisual(){
	        	var ids= $("#gridTable").jqGrid("getGridParam", "selarrrow") + "";
				if (!ids) {
				    alert("请先选择记录!");  
				    return false;  
				}
				var id = ids.split(',');
				$.ajax({
					type:'post',
					dataType:'json',
					url:'<%=request.getContextPath()%>/visual/visualAction!delVisualById.action?ids='+ids,
					success:function(data){
						if(data.result=='success'){
							 alert('删除成功！');
							 refreshJqgrid();
						}else if(data.result=='dontDel'){
							 alert('该节点下有数据，不能删除');
						}else{
							alert('删除失败，请重试！');
						}
					}
				});
	        }
		
		//设计
		function designvisual(){
			var ids = $("#gridTable").jqGrid("getGridParam", "selarrrow");
			if (ids.length == 0) {   
			    alert("请先选择一条数据!");  
			    return false;  
				} 
			if(ids.length > 1){
				alert("只能选择一条数据！");
				return false;
			}
			var row = $("#gridTable").jqGrid("getRowData", ids);
			var id = row.id;
			var temp =window.showModalDialog(common_contextPath+'/visual/visualAction!initVisual.action?temp='+new Date()+'&id='+id,null,"dialogWidth=1050px;dialogHeight=650px;resizable=yes");
			//refreshJqgrid();
		}
		
		//设计
		function viewvisual(){
			var ids = $("#gridTable").jqGrid("getGridParam", "selarrrow");
			if (ids.length == 0) {   
			    alert("请先选择一条数据!");  
			    return false;  
				} 
			if(ids.length > 1){
				alert("只能选择一条数据！");
				return false;
			}
			var row = $("#gridTable").jqGrid("getRowData", ids);
			var id = row.id;
			var temp =window.open(common_contextPath+'/visual/visualAction!viewVisual.action?id='+id+'&temp='+new Date(),null,'height=650,width=1050,top=0,left=0,toolbar=no,menubar=no,scrollbars=yes, resizable=yes,location=no, status=no');
			//refreshJqgrid();
		}
		
		function refresh()
		{
			document.location.href=common_contextPath+'/visualAction!initVisualdesignlist.action';
		}
		function refreshJqgrid()
		{
			 var postData = $("#gridTable").jqGrid("getGridParam", "postData");
			  jQuery("#gridTable").jqGrid('setGridParam',
		            {
		                url:common_contextPath+'/visual/visualAction!GetVisualList.action'
		            }).trigger("reloadGrid", [{page:1}]); 
		}
		
		//====================下拉树菜单==============================
		var treeIsLoad = false;
        function showMenu() {
            if(!treeIsLoad){
                showOrgTree();
            }    
           
            var cityObj = $("#visualName");
            var cityOffset = $("#visualName").offset();
            $("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");

            $("body").bind("mousedown", onBodyDown);
        }
        
        function showOrgTree(){
            treeIsLoad = true;
            var setting = {
                treeId:"orgTree",
                view: {
                    dblClickExpand: false
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                   // beforeClick: beforeClick,
                    onClick: onClick
                }
            };
            var zNodes;
	            $.ajax({  
                   url : common_contextPath+"/visual/visualAction!getPersenTree.action",  
                   type : "post", 
                   dataType : "json",  
                   cache : false,  
                   async:false,
                   error : function(textStatus, errorThrown) {  
                       alert("系统ajax交互错误: " + textStatus.value);  
                   },  
                   success : function(data, textStatus) {
                      zNodes = data;
                      $.fn.zTree.init($("#treeDemo"), setting,zNodes);
                   } 
               });             
        	}  
        	
        	function onClick(e, treeId, treeNode) {
	            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
	            nodes = zTree.getSelectedNodes();
	            v = "";
	            o = "";
	            nodes.sort(function compare(a,b){return a.id-b.id;});
	            for (var i=0, l=nodes.length; i<l; i++) {
	                v += nodes[i].name + ",";
	                o += nodes[i].id + ",";
	            }
	            if (v.length > 0 ) v = v.substring(0, v.length-1);
	            if (o.length > 0 ) o = o.substring(0, o.length-1);
	            var visualName = $("#visualName");
	            var visualId = $("#visualId");
	            visualId.attr("value",o);
	            visualName.attr("value", v);
	            hideMenu();
	            if(null!=o&&""!=o){
	            	var params = {  
		                "visualId" : o
		            };

		            var postData = $("#gridTable").jqGrid("getGridParam", "postData");
		            $.extend(postData, params);  //(9)将postData中的查询参数覆盖为空值
		            jQuery("#gridTable").jqGrid('setGridParam',
		            {
		                url:common_contextPath+'/visual/visualAction!GetVisualList.action'
		            }).trigger("reloadGrid", [{page:1}]); 
	            }
	        }
	        
	        function hideMenu() {
	            $("#menuContent").fadeOut("fast");
	            $("body").unbind("mousedown", onBodyDown);
	        }
	        
	        function onBodyDown(event) {
	            if (!(event.target.id == "visualName" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
	                hideMenu();
	            }
	        }
	        //===============================下拉树菜单结束========================
		</script>
		
	</head>

	<body style="margin-bottom: 0px">
		<table width="100%" style="height: 100%">
			<tr width="100%">
				<td colspan="2">
					<div class="title" style="cursor: hand">
						<div style="float: left">
							您的当前位置： 首页 &gt;&gt;可视化管理&gt;&gt;
							<strong>可视化列表</strong>
						</div>
					</div>
				</td>
			</tr>
			
			<tr>
			<td height="379" width="20%" valign="top"
				style="background: #FFFFFF; border: #B4C4D1 solid 1px;">
				<div style="font-size:14px; ">名称检索：
					<input type="text" id="key" name="orgName" value="" class="empty" style="width:150px; height:16px; line-height:20px;"  />
				</div>
				<div class='titlie'> 
					<span style="margin-left:220px;" >
					    <img onclick="return false;"  src="<%=request.getContextPath() %>/images/tree/add.png" alt="展开" title="点击展开所有节点"  id="expandAllBtn"/>
					</span>
					<span >
						<img onclick="return false;" src="<%=request.getContextPath() %>/images/tree/delete.gif"  alt="闭合" title="点击关闭所有节点" id="collapseAllBtn"/>
					</span>	
				</div>
				<div
					style="WIDTH: 265px; HEIGHT: 410px; OVERFLOW: scroll; scrollbar-3dlight-color: #595959; scrollbar-arrow-color: #FFFFFF; scrollbar-base-color: #CFCFCF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-face-color: #CFCFCF; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #595959">
					<div id="treeList" class="dtree">
						<ul id="tree" class="ztree" style="width:230px; overflow:auto;"></ul>
						
					</div>
				</div>
			</td>
			
			<td valign="top" width="80%">
				<table>
					<tr>
					<td>
						<input type='button' value='添加基本信息' class='button_b' onclick="addvisual()"  />
						<input type='button' value='修改基本信息' class='button_b' onclick="editvisual()"  />
						<input type='button' value='删除信息' class='button_b' onclick="delvisual()"  />
						<input type='button' value='设计可视化' class='button_b' onclick="designvisual()"  />
						<input type='button' value='查看可视化' class='button_b' onclick="viewvisual()"  />
						筛选名称:
			            <input type="hidden" id="visualId" name="visualId" />
	                    <input id="visualName" name="visualName" type="text"  readonly="readonly" value="--请选择--" style="width: 160px;  align:left; height: 20px; border: 1px #cccccc solid; background: url(img/xia_l.png) no-repeat right center; background-color:#FFFFFF;" onclick="showMenu();" />
	                      	<div id="menuContent" class="menuContent"
	                          style="display: none; position: absolute;z-index:10000; background:#f0f6e4; border:1px solid #617775; overflow-y:auto; overflow-x:auto;width:180px;">
	                            <ul id="treeDemo" class="ztree"
	                              style="margin-top: 0; width: 170px; height: 200px;z-index:10000;">
	                            </ul>
	                       </div>		                        
					</td>
					</tr>
					<tr>
						<td width="100%">
							<table id="gridTable"></table>
							<div id="gridPager"></div>
						</td>
					</tr>
				</table>
			</td>
			</tr>
		</table>
	</body>
</html>